import React from 'react'
import styled from '@emotion/styled'
import { Row } from 'components/lib'
import { useAuth } from 'context/auth-context'  
import { ProjectListPage } from 'pages/project-list'
import { ProjectPage } from 'pages/project'
import {ReactComponent as SoftwareLogo} from 'assets/software-logo.svg'
import { Button, Dropdown, Menu } from 'antd'
import { Navigate, Route, Routes } from 'react-router'
import { BrowserRouter as Router } from 'react-router-dom'
import { resetRoute } from 'utils'

export const AuthenticatedApp = () => {
  return (
    <Container>
      {/* 这个一定要包在这里 */}
      <Router >
        <PageHeader />
        <Main>
          {/* Router类似Context和Provider */}
          <Routes>  
            <Route path={'/projects'} element={<ProjectListPage/>} />
            {/* :后面表示的是变量，/*表示都行 */}
            <Route path={'/projects/:projectId/*'} element={<ProjectPage/>} />
            <Route path="*" element={<Navigate to="/projects" replace={true} />} />
          </Routes>
        </Main>
      </Router>
    </Container>
  )
}

const PageHeader = () => {
  const {logout , user} = useAuth()
  return (
    <Header between={true}>
      <HeaderLeft gap={true}>
        <Button type={'link'} onClick={resetRoute}>
          <SoftwareLogo width={'18rem'} color={'rgb(38, 132, 255)'}/>
        </Button>
        <H2>项目</H2>
        <H2>用户</H2> 
      </HeaderLeft>
      <HeaderRight>
        <Dropdown overlay={<Menu>
          <Menu.Item key={'logout'}>
            <Button onClick={logout} type={'link'}>登出</Button>
          </Menu.Item>
        </Menu>}>
        <Button type={'link'} onClick={e => e.preventDefault()}>Hi，{user?.name}</Button>
        </Dropdown>
      </HeaderRight>
    </Header>
  )
}

const Container = styled.div`
  display: grid;
  grid-template-rows: 6rem 1fr;
  height: 100vh;
`
// grid-area是用来给子元素起名字的
const Header = styled(Row)`
  padding: 3.2rem;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  z-index: 1;
`
const H2 = styled.h2`
  font-weight: bold;
`
const HeaderLeft = styled(Row)``
const HeaderRight = styled.div`` 
const Main = styled.main``